<template>
    <div class="swiper-container"  v-if="topImages.length">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(topImage,index) in topImages" :key="index">
            <a href="javascript:void(0);">
              <div class="top-image">
                <img class="item" :src="topImage" />
              </div>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  props: {
    topImages: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {

    }
  },
  components: {
    // Swiper
  },
  watch: {
    topImages () {
      this.$nextTick(() => {
        // eslint-disable-next-line no-new
        new Swiper('.swiper-container', {
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination'
          },
          // 自动轮播
          autoplay: {
            delay: 2500, // 时间 毫秒
            disableOnInteraction: false // 用户操作之后是否停止自动轮播默认true
          },
          loop: true // 循环 最后面一个往后面滑动会滑到第一个
        })
      })
    }
  }

}
</script>
<style lang="less" scoped>

.item {
  width: 100%;
}
.swiper-container {
  height: 300px;
}
/deep/.swiper-pagination-bullet-active {
  background: var(--color-tint)
}
</style>
